import React,{useState} from 'react'
import styles from './css/Message.module.scss'
import { SettingO,BrushO, } from '@react-vant/icons';
import Take from './TakeModel'
import {useNavigate} from 'react-router-dom'



export default function Message() {
  const [mian, setMian] = useState([
    {img:'/7.png',title:'系统通知',content:'你发起的一起跑项目已经结束招募',time:'三分钟前',path:'/one'},
    {img:'/8.png',title:'互动消息',content:'@花琉璃5566评论了你的内容',time:'两天前',path:'/two'},
  ])
  const [notice, setNotice] = useState([
    {img:'/1.png',title:'小李快步跑',content:'老铁来农业大学这边跑步啊~',time:'一周前',path:'/three'},
    {img:'/2.png',title:'甜蜜的范儿',content:'明天晚上还一起跑步吗',time:'03:07',path:'/three'},
    {img:"/3.png",title:'Harry5566',content:'老铁的拍照技术不错啊',time:'03:21',path:'/three'},
    {img:'/4.png',title:'花琉璃5566',content:'也不是每天，只要晚上没有选修课就去跑一会儿',time:'03:17',path:'/three'},
    {img:'/5.png',title:'明日明光',content:'哈哈哈可以变跑步边看球啊！',time:'03:47',path:'/three'},
    {img:'/6.png',title:'平安喜乐',content:'大哥周末什么安排',time:'04:59',path:'/three'},
  ])
  const navigate = useNavigate()



  return (
    <div>
      <div className={styles.topH1}>
        <h1>消息中心</h1>
        <div className={styles.topH1Icon}>
          <BrushO  fontSize={20}/>
          <SettingO fontSize={20} onClick={()=>{
            navigate('/four')
          }} />
        </div>
      </div>
      <div className={styles.context_top}>
          {
            mian.map((item,index)=>{
              return <Take key={index} data={item} />
            })
          }
        </div>
        <div className={styles.notice}>
          <h3>私信消息</h3>
          {
            notice.map((item,index)=>{
              return <Take key={index} data={item} />
            })
          }
        </div>
    </div>
  )
}
